<template>
    <div class="box">
       <ul v-for="(item,index) in bookLists" :key="index">
           <li :class="[arrId.includes(item.id)?'liActive':'','lis']" @click="bookBtnClick(item,index)">{{item.bookName}}</li>
           <!-- 直选中页面中一个，其余均不选 -->
              <!-- <li :class="[status== item.id?'liActive':'']" @click="bookBtnClick(item.id)">{{item.bookName}}</li> -->
       </ul>
       <button class="btn" @click="chooseBClick" type="button">确定</button>
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
    export default {
        data(){
            return{
                // status:0,
                arr:[],
                arrId:[],
                dir:''
            }
        },
        computed:{
            ...mapState({
               bookLists : state =>state.user.bookLists,
               choosedBook:state =>state.user.choosedBook
            })
        },
        methods:{
            ...mapActions([
                'getChoosedBook'
            ]),
            // 为选中的图书设置高亮样式 
            bookBtnClick(item,index){
                if(this.arrId.includes(item.id)){
                    this.arr= this.arr.filter(function(val,index){
                         return val.id!=item.id
                     })
                      this.arrId= this.arrId.filter(function(val,index){
                         return val!=item.id
                     })

                }else{
                     this.arr.push(item)
                    this.arrId.push(item.id)
                }
               
            },
            // 确定选中的图书并回到新增路由页
            chooseBClick(){
                this.getChoosedBook(this.arr)
                console.log(this.dir)
                this.$router.push(this.dir)
            }
        },
        mounted(){
            if(this.choosedBook.length>0){
                this.arr = this.choosedBook,
                this.arrId = this.choosedBook.map((val,index)=>{
                    return val.id
                })
            }
        },
         // 组件内的守卫 从哪来 让他回哪去
         beforeRouteEnter (to, from, next) {
            //  console.log(from)
            next(vm =>{
                //跳转时从哪里来
                 vm.dir = from.name
                
            })
        }
        
    }
</script>

<style scoped>
ul li.liActive{
    border: 1px solid red;
    list-style-type: none;
    text-indent: 10px;
    padding: 3px
}
li.lis{
    border: 1px solid #ccc;
    list-style-type: none;
    text-indent: 10px;
    padding: 3px
}
.box button{
    margin-left: 40px;
}
</style>